import React, {PropTypes, Component} from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import {observer} from 'mobx-react';
import qs from 'qs';

import './index.scss';

import lyby from '../util';

import CurStore from './store';

import ButtonCmp from '../../components/ui/button/index';

// var UploadApp = require('../components/UploadApp.react');
// var UploadActions = require('../actions/UploadActions');
// var UploadStore = require('../stores/UploadStore');

@observer
export default class Maincmp extends Component {
    state = {
        showMenu: false,
        msgHide:true,
        userMenuHide:true,
        uploadMenuHide : true
    }
    _toggleUserMenu(event){
        this.setState({
            userMenuHide: !this.state.userMenuHide
        });
        event.stopPropagation();
        event.nativeEvent.stopImmediatePropagation();
    }

    _showMenu(){
        console.log('show menu ...');
        $('#site').toggleClass('with-menu');
    }

    _toggleUploadMenu(event) {
        this.setState({
            uploadMenuHide: !this.state.uploadMenuHide
        });
        event.stopPropagation();
        event.nativeEvent.stopImmediatePropagation();
    }
    _logout() {
        $.removeCookie('JSESSIONID', {path: '/'});
        let logoutUrl = location.href;
        $.ajax({
            url: '/community/logOut',
            type: 'post',
            dataType: 'json',
            data: {},
            success: function (data) {
                if (data.status == '200') {
                    location.href = '/';
                }
            }
        });
    }

    _upload() {
        if (!CurStore.login) {
            window.location.href = '/user/login?redirect=' + encodeURIComponent(location.href);
            return;
        }
        let loginUser = CurStore.user;
        let userUrl = '/community/user-details/' + loginUser.id + '?upload=1';
        location.href = userUrl;
    }

    _toogleMsg(event) {
        location.href = '/page/message/index';
    }

    render() {
        let loginUrl = '/user/login?redirect=' + encodeURIComponent(location.href),
            regUrl = '/user/registerMe?redirect=' + encodeURIComponent(location.href),
            indexUrl = '/community/index.html',
            rows = [];

        let loginUser = CurStore.user;
        let VCG = CurStore.VCG_info;
        if (CurStore.login) {
            let photographerQuerry = '/community/user-details/' + loginUser.id + '?market=1';
            let userUrl = '/community/user-details/' + loginUser.id;
            rows.push(<li key="logined">
                <div className="user" onClick={this._toggleUserMenu.bind(this)}>
                    <img src={loginUser.avatar} width="100%" className="avatar"/>
                    <div className={classNames({dropdown: true, hide: this.state.userMenuHide})}
                         style={{right: "0px", top: "55px"}}>
                        <div className="arrow"><i style={{marginLeft: "57px"}}></i></div>
                        <div className="content">
                            <ul>
                                <li className="enHide"><a href={userUrl}>个人中心</a></li>
                                <li className="enHide"><a href="/page/settingsv/index">我的设置</a></li>
                                {/*<li className="enHide"><a href="/community/support">帮助中心</a></li>*/}
                                {/*<li className="enHide"><a href="/page/contacts/index">联系我们</a></li>*/}
                                <li><a href="javascript:void(0)" onClick={this._logout}>退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>);
        } else {
            indexUrl = '/community/index.html';
            rows.push((
                <li className="login" key="login">
                    <ButtonCmp {...{
                        href : loginUrl,
                        text : '登录'
                    }}/>
                </li>
            ));
            rows.push(
                <li className="reg" key="register">
                    <ButtonCmp {...{
                        href : regUrl,
                        cls : {
                            regbtn : true
                        },
                        text : '注册'
                    }}/>
                </li>
            );
        }
        let upload = '';
        return (
            <div className="container block-nav-2 __top">
                <div className="row row-mobile adjust">
                    <div className="span_12_of_12 clearfix" style={{'marginRight': '20px'}}>
                        <ul className="nav left flexbox">
                            {
                                lyby.ismobile?(
                                    <li className="show-menu">
                                        <div className="pic" style={{height: 'auto', lineHeight: 'normal'}}
                                             onClick={this._showMenu.bind(this)}
                                        ><span className="icon big icon-menu-lg" style={{marginTop: '17px'}}></span></div>
                                        <div className={classNames({"dropdown": true, hide: !this.state.showMenu})}>
                                            <div className="content">
                                                <ul>{
                                                    CurStore.login ? (
                                                        <li className={classNames({'selected': CurStore.active == '首页'})}><a
                                                            href={indexUrl}>首页</a></li>) : ''
                                                }
                                                    <li className={classNames({'selected': CurStore.active == '发现'})}><a
                                                        href="/community/discovery">发现</a></li>
                                                    <li className={classNames({'selected': CurStore.active == '设计师'})}><a
                                                        href="/community/designer">设计师</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                ):null
                            }
                            {
                                !lyby.ismobile?(
                                    <a href="/"  style={{marginRight:"33px"}}>
                                        <li className="logo"><div  className="pic">
                                            <img src={lyby.domain+"/img/hj_logo.svg"} style={{width:110,height:'auto',marginTop:5}}/>
                                        </div></li>
                                    </a>
                                ):null
                            }
                            {
                                CurStore.login && !lyby.ismobile? (<li className={classNames({
                                    enHide: true,
                                    'pc-item': true,
                                    'active': CurStore.active == '首页'
                                })}><a href={indexUrl} className="text">首页</a><i></i></li>) : ''
                            }
                            {
                                !lyby.ismobile?(
                                    <li className={classNames({
                                        enHide: true,
                                        'pc-item': true,
                                        'active': CurStore.active == '发现'
                                    })}><a href="/community/discovery" className="text">发现</a><i></i></li>
                                ):null
                            }
                            {
                                !lyby.ismobile?(
                                    <li className={classNames({
                                        enHide: true,
                                        'pc-item': true,
                                        'active': CurStore.active == '活动',
                                        huodong: true
                                    })} onClick={this._nabClick}>
                                        <a className="text" href="/page/exhibition/index">策展</a>
                                    </li>
                                ):null
                            }
                            {
                                !lyby.ismobile?(
                                    <li className={classNames({
                                        enHide: true,
                                        'pc-item': true,
                                        'active': CurStore.active == '设计师'
                                    })}><a href="/community/designer" className="text">设计师</a><i></i></li>
                                ):null
                            }
                            {
                                !lyby.ismobile?(
                                    <li className={classNames({
                                        enHide: true,
                                        'pc-item': true,
                                        'active': CurStore.active == '活动',
                                        huodong: true
                                    })} onClick={this._nabClick}>
                                        <a className="text" href="/page/contestv/index">赛事</a>
                                    </li>
                                ):null
                            }
                            {/*{*/}
                                {/*!lyby.ismobile?(*/}
                                    {/*<li ref="xiaBa" className={classNames({*/}
                                        {/*'xiaba': true,*/}
                                        {/*enHide: true,*/}
                                        {/*'pc-item': true,*/}
                                        {/*'active': CurStore.active == '素材'*/}
                                    {/*})}><span></span><a href="https://xiaba.shijue.me/?utm_source=shijueme&chid=812"*/}
                                           {/*target="_blank" className="text">下吧</a><i></i></li>*/}
                                {/*):null*/}
                            {/*}*/}
                            {/*{*/}
                                {/*!lyby.ismobile?(*/}
                                    {/*<li className={classNames({*/}
                                        {/*enHide: true,*/}
                                        {/*'pc-item': true,*/}
                                        {/*'active': CurStore.active == '更多',*/}
                                        {/*huodong: true*/}
                                    {/*})} onClick={this._nabClick}>*/}
                                        {/*<a className="text">更多</a>*/}
                                        {/*<i></i>*/}
                                        {/*<ul className="sub">*/}
                                            {/*<li><a href="/node/contractIllustration">签约</a></li>*/}
                                            {/*<li><a href="/node/adobeSales">Adobe CC</a></li>*/}
                                        {/*</ul>*/}

                                    {/*</li>*/}
                                {/*):null*/}
                            {/*}*/}
                        </ul>
                        <ul className="profile right flexbox">
                            {
                                CurStore.login ? (
                                    <li className="upload enHide">
                                        {
                                            VCG.common && VCG.common.user && VCG.common.user.permMap && (VCG.common.user.permMap.creativecontractphotographer || VCG.common.user.permMap.editorialcontractphotographer) ? (
                                                <div className="menuUpload">
                                                    <a href="javascript:void(0)" className="pic" onClick={this._toggleUploadMenu.bind(this)}>
                                                        <svg className="svg-icon" viewBox="0 0 30 22" style={{width:"30px",height: "22px"}}>
                                                            <path id="XMLID_230_"  d="M25,6.3c-0.9-3.4-4.1-5.8-7.6-5.8c-2.4,0-4.6,1-6.1,2.9C9.5,3.3,7.9,4.2,7,5.8c-4,0.5-7,3.8-7,7.9c0,4.1,3.2,7.5,7.3,7.9l3.7,0c0.3,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7l-3.7,0c-3.4-0.3-6-3.2-6-6.6c0-3.5,2.7-6.3,6.2-6.6l0.4,0l0.2-0.4c0.6-1.3,1.9-2.2,3.4-2l0.4,0l0.2-0.3c1.3-1.7,3.2-2.6,5.3-2.6c3,0,5.7,2.2,6.4,5.1l0.1,0.4l0.4,0.1c2.7,0.9,4.5,3.4,4.5,6.2c0,3.6-3,6.6-6.6,6.6h-6.3v-9.5c0,0,0,0,0,0l4.2,4.5c0.2,0.2,0.4,0.2,0.6,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1l-5.3-5.7c-0.4-0.5-1.1-0.5-1.6,0l-5.3,5.7c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l4.2-4.5c0,0,0,0,0,0v10c0,0.4,0.3,0.8,0.8,0.8c0,0,0,0,0,0c0,0,0,0,0,0h7.1c4.4,0,7.9-3.6,7.9-7.9C30,10.4,28,7.5,25,6.3z" />
                                                        </svg>
                                                    </a>
                                                    <div className={classNames({dropdown:true,hide:this.state.uploadMenuHide})}
                                                         style={{right:"0px",top:"55px"}}>
                                                        <div className="arrow"><i style={{marginLeft:"57px"}}></i></div>
                                                        <div className="content">
                                                            <ul>
                                                                {
                                                                    VCG.common.user.permMap.creativecontractphotographer && (VCG.common.user.assetFamily==2||VCG.common.user.assetFamily==3) ? (
                                                                        <li className="enHide"><a href="/node/marketUpload?assetFamily=2" target="">创意类签约上传</a></li>
                                                                    ) : null
                                                                }
                                                                {
                                                                    VCG.common.user.permMap.editorialcontractphotographer && (VCG.common.user.assetFamily==1||VCG.common.user.assetFamily==3)? (
                                                                        <li className="enHide"><a href="/node/marketUpload?assetFamily=1" target="">编辑类签约上传</a></li>
                                                                    ) : null
                                                                }
                                                                {
                                                                    VCG.common.user.permMap.creativecontractphotographer || VCG.common.user.permMap.editorialcontractphotographer ? (
                                                                        <li><a href="javascript:void(0)" className="TwoLevelMenuUpload TwoLevelMenuUpload2" onClick={this._upload.bind(this)}>社区上传</a></li>
                                                                    ) : null
                                                                }
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            ) : (
                                                <a data-href="/community/upload_entry.html" onClick={this._upload.bind(this)} className="pic">
                                                    <svg className="svg-icon" viewBox="0 0 30 22" style={{width:"30px",height: "22px"}}>
                                                        <path id="XMLID_230_"  d="M25,6.3c-0.9-3.4-4.1-5.8-7.6-5.8c-2.4,0-4.6,1-6.1,2.9C9.5,3.3,7.9,4.2,7,5.8c-4,0.5-7,3.8-7,7.9c0,4.1,3.2,7.5,7.3,7.9l3.7,0c0.3,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7l-3.7,0c-3.4-0.3-6-3.2-6-6.6c0-3.5,2.7-6.3,6.2-6.6l0.4,0l0.2-0.4c0.6-1.3,1.9-2.2,3.4-2l0.4,0l0.2-0.3c1.3-1.7,3.2-2.6,5.3-2.6c3,0,5.7,2.2,6.4,5.1l0.1,0.4l0.4,0.1c2.7,0.9,4.5,3.4,4.5,6.2c0,3.6-3,6.6-6.6,6.6h-6.3v-9.5c0,0,0,0,0,0l4.2,4.5c0.2,0.2,0.4,0.2,0.6,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.8,0-1.1l-5.3-5.7c-0.4-0.5-1.1-0.5-1.6,0l-5.3,5.7c-0.3,0.3-0.3,0.8,0,1.1c0.3,0.3,0.8,0.3,1.1,0l4.2-4.5c0,0,0,0,0,0v10c0,0.4,0.3,0.8,0.8,0.8c0,0,0,0,0,0c0,0,0,0,0,0h7.1c4.4,0,7.9-3.6,7.9-7.9C30,10.4,28,7.5,25,6.3z" />
                                                    </svg>
                                                </a>
                                            )
                                        }
                                    </li>
                                ) : ''
                            }
                            {
                                CurStore.login ? (
                                    <li className={classNames({
                                        enHide: true,
                                        active: !this.state.msgHide,
                                        message: true,
                                        notice: true
                                    })}>
                                        <div className="pic" onClick={this._toogleMsg}>
                                            {this.state.showMsgDot ? <i className="notice-inform"></i> : ''}
                                            <svg className="svg-icon" viewBox="0 0 30 22"
                                                 style={{width: "30px", height: "22px"}}>
                                                <path id="XMLID_237_"
                                                      d="M25.3,21H3.7c-2,0-3.6-1.7-3.6-3.9v-8c0-0.4,0.3-0.7,0.6-0.7s0.6,0.3,0.6,0.7v8c0,1.4,1.1,2.5,2.3,2.5h21.5c1.3,0,2.3-1.1,2.3-2.5V3.9c0-1.4-1.1-2.5-2.3-2.5H3.7c-1.3,0-2.3,1.1-2.3,2.5v0.7C1.4,4.8,1.5,5,1.7,5l12.5,7.6c0.2,0.1,0.5,0.1,0.8,0l10.7-7.4c0.3-0.2,0.7-0.1,0.9,0.2c0.2,0.3,0.1,0.7-0.2,0.9l-10.7,7.4c-0.7,0.4-1.4,0.4-2,0.1L1,6.2c-0.6-0.3-0.9-1-0.9-1.7V3.9C0.1,1.7,1.7,0,3.7,0h21.5c2,0,3.6,1.7,3.6,3.9v13.2C28.9,19.3,27.3,21,25.3,21z"/>
                                            </svg>

                                            <div className={classNames({
                                                dropdown: true,
                                                hide: this.state.msgHide,
                                                "message-dropdown": true
                                            })} onClick={this._stopPropagation}>
                                                <div className="arrow"><i style={{marginLeft: "70px"}}></i></div>
                                                <div className="content">
                                                    <div className="head">
                                                        <span>消息中心</span>
                                                        <i className="icon icon-close-sm small"
                                                           onClick={this._closeMsg}></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                ) : ''
                            }
                            {rows}
                        </ul>
                    </div>
                </div>
                {upload}
            </div>
        );
    }
}

Maincmp.propTypes = {
    active: PropTypes.string,
    account: PropTypes.object
};